<%-- 
    Document   : managestaffmembers
    Created on : 21 Sep 2013, 9:48:57 AM
    Author     : Salman Noor : School of Electrical and Information Engineering
--%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/common/hometaglibs.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <body>
        <div id="mainContainer">
            <h1 class="exampleTitle"><strong>Work Allocation</strong> System</h1>            
            <div id="mainSubContainer">
                <div id="leftNav">
                    <%@include file="/WEB-INF/includes/sideNavBar.jsp" %>
                </div>
                <div id="actualSuperContentContainer">
                    <h1 class="exampleTitle subTitle">Manage <strong>Staff Members</strong></h1>   

                    <div id="example" class="k-content">
                        <input type="hidden" name="baseUrl" value="<c:url value="/manage/staffmembers/"/>"/>
                        <input type="hidden" name="disciplineUrl" value="<c:url value="/manage/disciplines/"/>"/>
                        <div class="demo-section">
                            <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new Staff Member</a>
                        </div>

                        <div class="demo-section">
                            <div id="listView"></div>
                            <div id="pager" class="k-pager-wrap"></div>
                        </div>

                        <script type="text/x-kendo-tmpl" id="template">
                            <div class="product-view k-widget">
                            <div class="edit-buttons">
                            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
                            </div>
                            <dl>
                           
                            
                            <dt>First Name</dt>
                            <dd>#:firstname#</dd>
                            <dt>Last Name</dt>
                            <dd>#:lastname#</dd>
                            <dt>User Name</dt>
                            <dd>#:username#</dd>
                            <dt>Password</dt>
                            <dd>#:kendo.toString("------","0000000")#</dd>
                            <dt>Email Address</dt>
                            <dd>#:email_address#</dd>
                            
                            <dt>Staff Number</dt>
                            <dd>#:staff_number#</dd>
                            <dt>Qualification</dt>
                            <dd>#:qualification#</dd>
                            <dt>Job Position</dt>
                            <dd>#:job_position#</dd>
                            <dt>Contract Type</dt>
                            <dd>#:contract_type#</dd>
                            <dt>Discipline Code</dt>
                            <dd>#:discipline_code#</dd>
                            <dt>Total Hours</dt>
                            <dd>#:total_hours#</dd>
                            <dt>Citizenship Percentage</dt>
                            <dd>#:kendo.toString(citizenship_percentage, "00 \\%")#</dd>
                            
                            <dt>Teaching Percentage</dt>
                            <dd>#:kendo.toString(teaching_percentage, "00 \\%")#</dd>
                            
                            <dt>Research Percentage</dt>
                            <dd>#:kendo.toString(research_percentage, "00 \\%")#</dd>
                            
                            
                            </dl>
                            </div>
                        </script>

                        <script type="text/x-kendo-tmpl" id="editTemplate">
                            <div class="product-view k-widget">
                            <div class="edit-buttons">
                            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
                            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
                            </div>
                            <dl>
     
                            <dt>First Name</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:firstname" name="firstname" required="required" validationMessage="required" />
                            <span data-for="firstname" class="k-invalid-msg"></span>
                            
                            <dt>Last Name</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:lastname" name="lastname" required="required" validationMessage="required" />
                            <span data-for="lastname" class="k-invalid-msg"></span>
                            
                            <dt>User Name</dt>
                            <dd>
                            <input type="text" class="k-textbox k-state-disabled" data-bind="value:username" name="username" required="required" validationMessage="required" />
                            <span data-for="username" class="k-invalid-msg"></span>
                            
                            <dt>Password</dt>
                            <dd>
                            <input type="password" class="k-textbox" data-bind="value:password" name="password" required="required" validationMessage="required" />
                            <span data-for="password" class="k-invalid-msg"></span>
                            
                            <dt>Email Address</dt>
                            <dd>
                            <input type="email" class="k-textbox" data-bind="value:email_address" name="email_address" required="required" required data-email-msg="Email format is not valid" />
                            <span data-for="email_address" class="k-invalid-msg"></span>
                            
                            <dt>Staff Number</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:staff_number" name="staff_number" required="required" validationMessage="required" />
                            <span data-for="staff_number" class="k-invalid-msg"></span>
                            </dd>
                            <dt>Qualification</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:qualification" name="qualification" required="required" validationMessage="required" />
                            <span data-for="qualification" class="k-invalid-msg"></span>
                            </dd>
                            <dt>Job Position</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:job_position" name="job_position" required="required" validationMessage="required" />
                            <span data-for="job_position" class="k-invalid-msg"></span>
                            </dd>
                            <dt>Contract Type</dt>
                            <dd>
                            <input type="text" class="k-textbox" data-bind="value:contract_type" name="contract_type" required="required" validationMessage="required" />
                            <span data-for="contract_type" class="k-invalid-msg"></span>
                            </dd>
                            
                            
                            

                            <dt>Discipline Code</dt>
                            <dd>
                            <input name="discipline_code"  class="k-textbox" required="required" validationMessage="required" />
                            <span data-for="discipline_code" class="k-invalid-msg"></span>
                            </dd>
                                                        
                            <dt>Total Hours</dt>
                            <dd>
                            <input type="text" data-bind="value:total_hours" data-role="numerictextbox" data-type="number" name="total_hours" required="required" min="1" validationMessage="required" />
                            <span data-for="total_hours" class="k-invalid-msg"></span>
                            </dd>
                            
                            <dt>Citizenship Percentage</dt>
                            <dd>
                            <input type="text" data-bind="value:citizenship_percentage" data-role="numerictextbox" data-type="number" name="citizenship_percentage" required="required" min="0" max="100" validationMessage="required" />
                            <span data-for="citizenship_percentage" class="k-invalid-msg"></span>
                            </dd>
                            <dt>Teaching Percentage</dt>
                            <dd>
                            <input type="text" data-bind="value:teaching_percentage" data-role="numerictextbox" data-type="number" name="teaching_percentage" required="required" min="0" max="100" validationMessage="required" />
                            <span data-for="teaching_percentage" class="k-invalid-msg"></span>
                            </dd>
                            <dt>Research Percentage</dt>
                            <dd>
                            <input type="text" data-bind="value:research_percentage" data-role="numerictextbox" data-type="number" name="research_percentage" required="required" min="0" max="100" validationMessage="required" />
                            <span data-for="research_percentage" class="k-invalid-msg"></span>
                            </dd>
                            </dl>
                            </div>
                        </script>

                        <script>
                            $(document).ready(function() {
                            var baseUrl = $("input[name='baseUrl']").val();
                            var disciplineUrl = $("input[name='disciplineUrl']").val();
                            dataSource = new kendo.data.DataSource({
                            transport: {
                            read: {
                            url:  baseUrl+"read",
                            type:"POST",
                            dataType: "json"
                            },
                            update: {
                            url:  baseUrl+"update",
                            type:"POST",
                            dataType: "json"
                            },
                            destroy: {
                            url:  baseUrl+"delete",
                            type:"POST",
                            dataType: "json"
                            },
                            create: {
                            url:  baseUrl+"create",
                            type:"POST",
                            dataType: "json"
                            },
                            parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                            }
                            }
                            },
                            batch: true,
                            pageSize: 2,
                            schema: {
                            model: {
                            id: "user_id",
                            fields: {
                            user_id: {editable: false, nullable: true},
                           academic_user:"academic_user",
                           firstname:"firstname",
                           lastname:"lastname",
                           username:"username",
                           password:"password",
                           email_address:"email_address",
                           staff_number:"staff_number",
                           qualification:"qualification",
                           job_position:"job_position",
                           contract_type:"contract_type",
                           total_hours:"total_hours",
                           citizenship_percentage:"citizenship_percentage",
                           teaching_percentage:"teaching_percentage",
                           research_percentage:"research_percentage",
                            discipline_id:"discipline_id",
                            discipline_code:"discipline_code",
                            
                            }
                            }
                            }
                            });


                            $("#pager").kendoPager({
                            dataSource: dataSource
                            });

                            var listView = $("#listView").kendoListView({
                            dataSource: dataSource,
                            template: kendo.template($("#template").html()),
                            editTemplate: kendo.template($("#editTemplate").html()),
                            change:function(e){console.log(e)},
                            add:function(e){console.log("sdfds");},
                            remove: function(e) {
                                    if(!confirm("This staff member and all of their research and teaching allocations will be deleted. Are you sure you want to delete?")) e.preventDefault(); 
                            },
                                save: function(e) {
                            var model = e.model;
                            var item = $(e.item[0]);
var usernameExists = false;
                            $.ajax({async:false,type:"POST",url:baseUrl+"check/username",data:{"username":item.find('[name="username"]').val()},success:function(res){
usernameExists = res;
}});
if(usernameExists){
//e.preventDefault();
}

    },
                            edit: function(e) {
                            var model = e.model;
                            var item = $(e.item[0]);

                            var name = item.find('[name="discipline_code"]');
                     
                            
                                    name.kendoComboBox({
            autobind: false,
            placeholder: "Discipline Code",
            change: function() {
                model.set("discipline_id", this.value());
                model.set("discipline_code", this.text());
            },
            dataTextField: "discipline_code",
            dataValueField: "discipline_id",
            filter: "contains",
              animation: {
   close: {
     effects: "fadeOut zoom:out",
     duration: 300
   },
   open: {
     effects: "fadeIn zoom:in",
     duration: 300
   }
  },
            dataSource: {

                pageSize: 10,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true,
                transport: {
                    read: {
                        url: disciplineUrl+"read",
                        dataType: "json",
                        type: "POST",
                        
                    }
                }
            }
        });
                            }
                            }).data("kendoListView");

                            $(".k-add-button").click(function(e) {
                            listView.add();
                            e.preventDefault();
                            });
                            });
                        </script>

                        <style scoped>
                            .demo-section {
                                width: 800px;
                            }
                            #pager{
                                min-width: 796px;
                            }
                            .product-view
                            {
                                float: left;
                                position: relative;
                                width: 799px;
                                margin: -1px -1px 0 0;
                            }
                            .product-view dl
                            {
                                margin: 10px 0;
                                padding: 0;
                                min-width: 0;
                            }
                            .product-view dt, dd
                            {
                                float: left;
                                margin: 0;
                                padding: 3px;
                                height: 26px;
                                width: 280px;
                                line-height: 26px;
                                overflow: hidden;
                            }
                            dd input{
                                width:100%;
                            }
                            dd .k-textbox,dd .k-numerictextbox{
                                width:100%
                            }
                            .product-view dt
                            {
                                clear: left;
                                padding: 3px 5px 3px 0;
                                text-align: right;
                                opacity: 0.6;
                                width: 300px;
                            }
                            .k-listview
                            {
                                border: 0;
                                padding: 0;
                                min-width: 800px;
                                min-height: 170px;
                            }
                            .k-listview:after, .product-view dl:after
                            {
                                content: ".";
                                display: block;
                                height: 0;
                                clear: both;
                                visibility: hidden;
                            }
                            .edit-buttons
                            {
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 26px;
                                height: 466px;
                                padding: 2px 2px 0 3px;
                                background-color: rgba(0,0,0,0.1);
                            }
                            .edit-buttons .k-button
                            {
                                width: 26px;
                                margin-bottom: 1px;
                            }
                            .k-pager-wrap
                            {
                                border-top: 0;
                            }
                            span.k-invalid-msg
                            {
                                position: absolute;
                                margin-left: 6px;
                            }
                        </style>




                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
